﻿<template>
  <el-row :gutter="20" v-if="config.other.dataSource">
      <el-col :span="24">
        <el-form-item label = "数据源设定">
          <el-radio-group v-model="config.other.dataSource.mode" @change="changMode">
            <el-radio-button label="static">静态</el-radio-button>
            <el-radio-button label="remote">后台</el-radio-button>
          </el-radio-group>
          <el-divider></el-divider>
          <el-card class="box-card" v-if="config.other.dataSource.mode === 'remote'">
            <div slot="header" class="clearfix">
              <span>数据属性</span>
            </div>
            <div style="padding: 5px 0 15px 0">
              <el-button type="success" @click="preview">效果预览</el-button>
            </div>
            <div style="padding: 0 0 5px 0">
              <el-radio-group v-model="config.other.dataSource.remoteCategory">
                <el-radio-button label="Dictionary">词典表</el-radio-button>
                <el-radio-button label="MetaPop">元数据引用栏位</el-radio-button>
                <el-radio-button label="Meta">元数据表</el-radio-button>
                <el-radio-button label="API">API</el-radio-button>
              </el-radio-group>
            </div>
            <div v-if="config.other.dataSource.remoteCategory === 'Dictionary'">
              <el-select v-model="config.other.dataSource.DicSettings.table" filterable placeholder="请选择">
                <el-option
                  v-for="item in dictables"
                  :key="item.dic_uid"
                  :label="item.dic_desc"
                  :value="item.dic_name">
                  <span style="float: left">{{ item.dic_desc }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.dic_name }}</span>
                </el-option>
              </el-select>
            </div>
            <div v-if="config.other.dataSource.remoteCategory === 'MetaPop'">
              <el-select v-model="config.other.dataSource.MetaPopSettings.table" filterable  placeholder="请选择" @change="changePopMeta">
                <el-option
                  v-for="(item,index) in metatables"
                  :key="index"
                  :label="item.metadesc"
                  :value="item.metauid">
                  <span style="float: left">{{ item.metadesc }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.metaname }}</span>
                </el-option>
              </el-select>
              <el-divider></el-divider>
              <el-form-item label = "含引用值栏位">
                <el-select v-model="config.other.dataSource.MetaPopSettings.column" filterable  placeholder="请选择">
                  <el-option
                    v-for="(item,index) in metaColumns"
                    :key="index"
                    :label="item.column_desc"
                    :value="item.column_name">
                    <span style="float: left">{{ item.column_desc }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                  </el-option>
              </el-select>
              </el-form-item>
              <el-form-item label = "排序设定">
                <el-button style="float: right; padding: 3px 0" type="text" @click="addPopOrderBy">添加</el-button>
                  <div>
                    <el-table :data = 'config.other.dataSource.MetaPopSettings.orderList' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
                      <el-table-column align = "center" prop = 'text' label = '栏位'>
                        <template slot-scope = "scope">
                          <el-select v-model="scope.row.column" clearable placeholder="请选择">
                            <el-option
                              v-for="(item,index) in metaColumns"
                              :key="index"
                              :label="item.column_desc"
                              :value="item.column_name">
                              <span style="float: left">{{ item.column_desc }}</span>
                              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column align = "center" prop = 'sort' label = '排序'>
                        <template slot-scope="scope">
                          <el-select v-model="scope.row.direction" clearable placeholder="请选择">
                            <el-option
                              v-for="(item,index) in orderOptions"
                              :key="index"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column align = "center" label = "操作" width = "50">
                        <template slot-scope = "scope">
                          <el-button type = "text" size = "mini" @click = "handlePopOrderRemove(scope.$index)" title = '移除'>
                            <i class = "iconfont icon-shanchu"></i>
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
              </el-form-item>
            </div>
            <div v-if="config.other.dataSource.remoteCategory === 'Meta'">
              <el-select v-model="config.other.dataSource.MetaSettings.table" filterable  placeholder="请选择" @change="changeMeta">
                <el-option
                  v-for="(item,index) in metatables"
                  :key="index"
                  :label="item.metadesc"
                  :value="item.metauid">
                  <span style="float: left">{{ item.metadesc }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.metaname }}</span>
                </el-option>
              </el-select>
              <el-divider></el-divider>
              <el-form-item label = "valueKey设定">
                <el-select v-model="config.other.dataSource.MetaSettings.valueKey" filterable  placeholder="请选择">
                  <el-option
                    v-for="(item,index) in metaColumns"
                    :key="index"
                    :label="item.column_desc"
                    :value="item.column_name">
                    <span style="float: left">{{ item.column_desc }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                  </el-option>
              </el-select>
              </el-form-item>
              <el-form-item label = "labelKey设定">
                <el-select v-model="config.other.dataSource.MetaSettings.labelKey" filterable  placeholder="请选择">
                  <el-option
                    v-for="(item,index) in metaColumns"
                    :key="index"
                    :label="item.column_desc"
                    :value="item.column_name">
                    <span style="float: left">{{ item.column_desc }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                  </el-option>
                </el-select>`
              </el-form-item>
              <el-form-item label = "过滤设定">
                <label class="tips">提示:值设定请参考知识库中的<a target="_blank" href="http://fjkb.whfjwl.com/mdShow.html?defaultPk=%7B%22defaultPk%22%3A%224c83f52d-e6c4-4d85-a143-507a852399ca%22%2C%22version%22%3A%221.0.0%22%7D">【ICP前端框架新版设计】</a>中的“事件词典表”</label>
                <div>
                  <el-button style="float: right; padding: 3px 0" type="text" @click="addFilter">添加</el-button>
                  <div>
                    <el-table :data = 'config.other.dataSource.MetaSettings.filterList' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
                      <el-table-column align = "center" prop = 'text' label = '栏位'>
                        <template slot-scope = "scope">
                          <el-select v-model="scope.row.column" clearable placeholder="请选择">
                            <el-option
                              v-for="(item,index) in metaColumns"
                              :key="index"
                              :label="item.column_desc"
                              :value="item.column_name">
                              <span style="float: left">{{ item.column_desc }}</span>
                              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column align = "center" prop = 'sort' label = '条件'>
                        <template slot-scope="scope">
                          <el-select v-model="scope.row.condition" clearable placeholder="请选择">
                            <el-option
                              v-for="(item,index) in conditionOps"
                              :key="index"
                              :label="item.label"
                              :value="item.value">
                              <span style="float: left">{{ item.label }}</span>
                              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column align = "center" prop = 'settings' label = '值设定'>
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.value" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column align = "center" label = "操作" width = "50">
                        <template slot-scope = "scope">
                          <el-button type = "text" size = "mini" @click = "handleFilterRemove(scope.$index)" title = '移除'>
                            <i class = "iconfont icon-shanchu"></i>
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label = "排序设定">
                <el-button style="float: right; padding: 3px 0" type="text" @click="addOrderBy">添加</el-button>
                  <div>
                    <el-table :data = 'config.other.dataSource.MetaSettings.orderList' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
                      <el-table-column align = "center" prop = 'text' label = '栏位'>
                        <template slot-scope = "scope">
                          <el-select v-model="scope.row.column" clearable placeholder="请选择">
                            <el-option
                              v-for="(item,index) in metaColumns"
                              :key="index"
                              :label="item.column_desc"
                              :value="item.column_name">
                              <span style="float: left">{{ item.column_desc }}</span>
                              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column align = "center" prop = 'sort' label = '排序'>
                        <template slot-scope="scope">
                          <el-select v-model="scope.row.direction" clearable placeholder="请选择">
                            <el-option
                              v-for="(item,index) in orderOptions"
                              :key="index"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column align = "center" label = "操作" width = "50">
                        <template slot-scope = "scope">
                          <el-button type = "text" size = "mini" @click = "handleOrderRemove(scope.$index)" title = '移除'>
                            <i class = "iconfont icon-shanchu"></i>
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
              </el-form-item>
            </div>
            <div v-if="config.other.dataSource.remoteCategory === 'API'">
              <el-form>
                <el-form-item label="事件">
                  <el-select v-model="config.other.dataSource.APISettings.api_uid" filterable clearable placeholder="请选择" @change="changAPI">
                    <el-option
                      v-for="(item, index) in apilist"
                      :key="index"
                      :label="item.name"
                      :value="item.no">
                        <span style="float: left">{{ item.name }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.no }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="URL">
                  <el-input v-model="config.other.dataSource.APISettings.api_url" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="Header">
                  <div class="clearfix">
                    <el-button style="float: right; padding: 3px 0" type="text" @click="addActionInput('input_header')">添加</el-button>
                  </div>
                  <el-table :data = 'config.other.dataSource.APISettings.input_header' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
                    <el-table-column align = "center" prop = 'key' label = 'Key'>
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.key"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column align = "center" prop = 'value' label = 'Value'>
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.value"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column align = "center" label = "操作" width = "50">
                      <template slot-scope = "scope">
                        <el-button type = "text" size = "mini" @click = "handleInputRemove(scope.$index, 'input_header')" title = '移除'>
                          <i class = "iconfont icon-shanchu"></i>
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
                <el-form-item label="Path">
                  <div class="clearfix">
                    <el-button style="float: right; padding: 3px 0" type="text" @click="addActionInput('input_path')">添加</el-button>
                  </div>
                  <el-table :data = 'config.other.dataSource.APISettings.input_path' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
                    <el-table-column align = "center" prop = 'key' label = 'Key'>
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.key"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column align = "center" prop = 'value' label = 'Value'>
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.value"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column align = "center" label = "操作" width = "50">
                      <template slot-scope = "scope">
                        <el-button type = "text" size = "mini" @click = "handleInputRemove(scope.$index, 'input_path')" title = '移除'>
                          <i class = "iconfont icon-shanchu"></i>
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
                <el-form-item label="QueryString">
                  <div class="clearfix">
                    <el-button style="float: right; padding: 3px 0" type="text" @click="addActionInput('input_querystring')">添加</el-button>
                  </div>
                  <el-table :data = 'config.other.dataSource.APISettings.input_querystring' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
                    <el-table-column align = "center" prop = 'key' label = 'Key'>
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.key"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column align = "center" prop = 'value' label = 'Value'>
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.value"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column align = "center" label = "操作" width = "50">
                      <template slot-scope = "scope">
                        <el-button type = "text" size = "mini" @click = "handleInputRemove(scope.$index, 'input_querystring')" title = '移除'>
                          <i class = "iconfont icon-shanchu"></i>
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
                <el-form-item label="PostData">
                  <div class="clearfix">
                    <el-button style="float: right; padding: 3px 0" type="text" @click="addActionInput('input_postdata')">添加</el-button>
                  </div>
                  <el-table :data = 'config.other.dataSource.APISettings.input_postdata' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
                    <el-table-column align = "center" prop = 'key' label = 'Key'>
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.key"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column align = "center" prop = 'value' label = 'Value'>
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.value"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column align = "center" label = "操作" width = "50">
                      <template slot-scope = "scope">
                        <el-button type = "text" size = "mini" @click = "handleInputRemove(scope.$index, 'input_postdata')" title = '移除'>
                          <i class = "iconfont icon-shanchu"></i>
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
                <el-form-item label="返回数据模型设定">
                  <el-input v-model="config.other.dataSource.APISettings.dataObject"></el-input>
                </el-form-item>
                <el-form-item label="ValueKey">
                  <el-input v-model="config.other.dataSource.APISettings.valueKey"></el-input>
                </el-form-item>
                <el-form-item label="LabelKey">
                  <el-input v-model="config.other.dataSource.APISettings.labelKey"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
          <el-card class="box-card" v-if="config.other.dataSource.mode === 'static'">
            <div style="padding: 5px 0 15px 0">
              <el-button type="success" @click="preview">效果预览</el-button>
            </div>
            <el-button style="float: right; padding: 3px 0" type="text" @click="addStaticOption">添加</el-button>
            <el-table :data = 'config.other.dataSource.staticOptions' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
              <el-table-column align = "center" prop = 'value' label = 'Value'>
                <template slot-scope = "scope">
                  <el-input v-model="scope.row.value"></el-input>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'label' label = 'Label'>
                <template slot-scope="scope">
                  <el-input v-model="scope.row.label"></el-input>
                </template>
              </el-table-column>
              <el-table-column align = "center" label = "操作" width = "50">
                <template slot-scope = "scope">
                  <el-button type = "text" size = "mini" @click = "handleStaticRemove(scope.$index)" title = '移除'>
                    <i class = "iconfont icon-shanchu"></i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-form-item>
      </el-col>
    </el-row>
</template>
<script>
export default {
  props: ['config'],
  data () {
    return {
      dictables: [],
      metatables: [],
      metaColumns: [],
      apilist: [],
      conditionOps: [{
        label: '等于',
        value: '$eq'
      }, {
        label: '大于',
        value: '$gt'
      }, {
        label: '大于等于',
        value: '$gte'
      }, {
        label: '小于',
        value: '$lt'
      }, {
        label: '小于等于',
        value: '$lte'
      }, {
        label: '模糊比对',
        value: '$like'
      }, {
        label: 'in',
        value: '$in'
      }],
      orderOptions: [{
        label: '升序',
        value: 'asc'
      }, {
        label: '降序',
        value: 'desc'
      }]
    }
  },
  mounted () {
    if (!this.config.other.dataSource) {
      this.$set(this.config.other, 'dataSource', {
        mode: 'static',
        remoteCategory: 'Dictionary',
        preview: false,
        DicSettings: {
          table: '',
          valueKey: 'code',
          labelKey: 'value'
        },
        MetaSettings: {
          table: '',
          filterList: [],
          orderList: [],
          valueKey: '',
          labelKey: ''
        },
        MetaPopSettings: {
          table: '',
          orderList: [],
          column: ''
        },
        APISettings: {
          api_uid: '',
          api_url: '',
          input_header: [],
          input_path: [],
          input_querystring: [],
          input_postdata: [],
          dataObject: '',
          valueKey: '',
          labelKey: ''
        },
        staticOptions: []
      })
    }
    if (!this.dictables || this.dictables.length <= 0) {
      this.dictables = this.$store.state.commonData.dictables
    }
    if (!this.metatables || this.metatables.length <= 0) {
      this.metatables = this.$store.state.commonData.metaList_inc_fc
      this.$nextTick(() => {
        this.metaColumns = []
        let self = this
        var item = this.metatables.find(v => {
          return v.metauid === self.config.other.dataSource.MetaSettings.table
        })
        if (item) {
          this.metaColumns = item.columns
        }
      })
    }
    if (!this.apilist || this.apilist.length <= 0) {
      this.apilist = this.$store.state.commonData.apiEvents
    }
  },
  methods: {
    changMode () {
    },
    changeMeta () {
      this.metaColumns = []
      this.config.other.dataSource.MetaSettings.valueKey = ''
      this.config.other.dataSource.MetaSettings.labelKey = ''
      let self = this
      var item = this.metatables.find(v => {
        return v.metauid === self.config.other.dataSource.MetaSettings.table
      })
      if (item) {
        this.metaColumns = item.columns
      }
    },
    changePopMeta () {
      this.metaColumns = []
      this.config.other.dataSource.MetaPopSettings.column = ''
      let self = this
      var item = this.metatables.find(v => {
        return v.metauid === self.config.other.dataSource.MetaPopSettings.table
      })
      if (item) {
        this.metaColumns = item.columns
      }
    },
    changAPI () {
      let self = this
      let list = this.apilist.filter((item, index) => {
        return item.no === self.config.other.dataSource.APISettings.api_uid
      })
      this.config.other.dataSource.APISettings.input_header = []
      this.config.other.dataSource.APISettings.input_path = []
      this.config.other.dataSource.APISettings.input_querystring = []
      this.config.other.dataSource.APISettings.input_postdata = []
      if (list.length > 0) {
        let p = JSON.parse(list[0].request_parameters)
        this.config.other.dataSource.APISettings.api_url = p.RequestUrl
        if (p.RequestHeader) {
          Object.keys(p.RequestHeader).forEach((item, index) => {
            this.config.other.dataSource.APISettings.input_header.push({
              key: item,
              value: self.getValueByKey(item)
            })
          })
        }
        if (p.RequestPath) {
          Object.keys(p.RequestPath).forEach((item, index) => {
            this.config.other.dataSource.APISettings.input_path.push({
              key: item,
              value: self.getValueByKey(item)
            })
          })
        }
        if (p.RequestQueryString) {
          Object.keys(p.RequestQueryString).forEach((item, index) => {
            this.cconfig.other.dataSource.APISettings.input_querystring.push({
              key: item,
              value: self.getValueByKey(item)
            })
          })
        }
        if (p.RequestPostData) {
          Object.keys(p.RequestPostData).forEach((item, index) => {
            this.config.other.dataSource.APISettings.input_postdata.push({
              key: item,
              value: self.getValueByKey(item)
            })
          })
        }
      }
    },
    addFilter () {
      this.config.other.dataSource.MetaSettings.filterList.push({
        column: '',
        condition: '',
        value: ''
      })
    },
    addOrderBy () {
      this.config.other.dataSource.MetaSettings.orderList.push({
        column: '',
        direction: 'asc'
      })
    },
    addPopOrderBy () {
      this.config.other.dataSource.MetaPopSettings.orderList.push({
        column: '',
        direction: 'asc'
      })
    },
    addStaticOption () {
      this.config.other.dataSource.staticOptions.push({
        value: '',
        label: ''
      })
    },
    addActionInput (filed_name) {
      if (!this.config.other.dataSource.APISettings[filed_name]) this.config.other.dataSource.APISettings[filed_name] = []
      this.$set(this.config.other.dataSource.APISettings[filed_name], this.config.other.dataSource.APISettings[filed_name].length, {
        key: '',
        value: ''
      })
    },
    handleInputRemove (index, filed_name) {
      this.config.other.dataSource.APISettings[filed_name].splice(index, 1)
    },
    handleFilterRemove (index) {
      this.config.other.dataSource.MetaSettings.filterList.splice(index, 1)
    },
    handleOrderRemove (index) {
      this.config.other.dataSource.MetaSettings.orderList.splice(index, 1)
    },
    handlePopOrderRemove (index) {
      this.config.other.dataSource.MetaPopSettings.orderList.splice(index, 1)
    },
    preview () {
      this.config.other.dataSource.preview = true
      let self = this
      setTimeout(() => {
        self.config.other.dataSource.preview = false
      }, 50)
    },
    getValueByKey (key) {
      switch (key) {
        default:
          return ''
      }
    }
  },
  watch: {
  }
}
</script>
<style lang="scss">
</style>
